<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>层级菜单</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: gray;
    transition: all 0.5s linear;
  }

  .menu {
    width: 165px;
    height: 260px;
    background-color: #fff;
    border-radius: 12px;
    padding: 4px;
  }

  /* #去掉默认的样式 */
  ul {
    list-style: none;
    transition: all 6s linear;
  }

  /* 设定点击a链接的前后状态变化 */
  .name {
    display: block;
    color: black;
    text-align: center;
    text-decoration: none;
    overflow: auto;
  }

  .name:hover {
    font-weight: 500;
    font-size: 14;
    color: #1D2129;
    background-color: #F2F3F5;
    overflow: auto;

  }

  /* li的通用设计 */
  li {
    line-height: 36px;
    height: 36px;
  }

  /* #设置第一行的li */
  .l1 {
    /* border: 1px black solid;
    border-radius: 10px; */
  }

  /* #设置第二行的li */
  .l3 {
    background-color: #fff;
    position: relative;
    left: 110%;
  }

  .l0 {
    background-color: rgb(165, 186, 186);
  }

  /* #使用了高度归零的隐藏方式 */
  .u4 {
    position: absolute;
    left: 200px;
    top: 10px;
    height: 0;
    overflow: hidden;
  }

  .l3:hover .u4 {
    height: auto;
  }

  /* #使用经典的none方式*/
  .u2 {
    display: none;
    opacity: 0;
  }

  .l1:hover .u2 {
    display: block;
    opacity: 1;
  }
</style>

<body>
  <div class="menu">
    <ul>

    </ul>

  </div>
</body>
<script src=" assets/js/jquery.min.js"></script>
<script src="assets/js/http/api.js"></script>
<script>
  //请求参数
  var obj = {
    // username: username,
    budgetYear: 2022,
    budgetMonth: 10,
    dept: '',
    status: 2,
    chartPage: 2,
    chartNo: 1
  }
  // API
  const val = [];
  ApiGet("getdata", obj, function (e) {
    var json = JSON.parse(e);
    let data = json.items[0].charts[0].data;
    data = data.slice(1)
    let treeData = []
    data.forEach((item) => {
      let obj = {
        id: item.key01,
        name: item.key03,
        fatherId: item.key02,
      }
      treeData.push(obj);
    })
    // console.log(treeData, '菜单表')
    // 处理数据
    //1、 先把数据处理成map
    const map = {};

    treeData.forEach((item) => {
      map[item.id] = item;
    });
    //2、 遍历之后，形成树形结构
    treeData.forEach((item) => {
      const parent = map[item.fatherId];
      if (parent) {
        (parent.children || (parent.children = [])).push(item);
      } else {
        val.push(item);
      }
    });
    // console.log("映射", map)
    console.log("新数组", val)
    let one = ''
    for (let i = 0; i < val.length; i++) {
      one +=
        `<li class="l1"><div class="name" onclick="clickitem(this)" id=${val[i].id} > ${val[i].name}</div></li>`
    }
    $(".menu ul").html(one)

  });

  function clickitem(obj) {
    let id = obj.getAttribute('id')
    console.log(id, '点击的id')
    let children = []
    //找该id(作为父id)的子id

    val.forEach((item) => {
      if (item.id == id) {
        children = item.children
        // console.log(item.children)
      }
    })
    let two = ''
    if (children) {
      var ul = document.createElement('ul');
      ul.className = "u2"
      document.querySelector(".l1").appendChild(ul)
      children.forEach((item) => {
        two +=
          `<li class="l3"><div class="name" onclick="clickitem2(this)" id=${item.id} > ${item.name}</div></li>`
        return two;
      })

    }
    $(".u2").html(two)


  }
</script>

</html>